<template>
	<div class="p-6 space-y-6">
		<h2 class="text-xl font-bold mb-4">设置中心</h2>

		<el-tabs v-model="activeTab">
			<el-tab-pane label="分类管理" name="category">
				<el-table :data="categories" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="分类名称" />
					<el-table-column prop="description" label="描述" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="规格/参数/成熟度" name="spec">
				<el-table :data="specs" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="名称" />
					<el-table-column prop="type" label="类型" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="运费模板" name="freight">
				<el-table :data="freights" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="模板名称" />
					<el-table-column prop="charge" label="计费方式" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="区域信息" name="region">
				<el-table :data="regions" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="区域名称" />
					<el-table-column prop="code" label="编码" />
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('category')

const categories = ref(Array.from({ length: 10 }).map((_, i) => ({
	name: `分类${i + 1}`,
	description: '产品分类说明'
})))

const specs = ref(Array.from({ length: 10 }).map((_, i) => ({
	name: `规格${i + 1}`,
	type: ['尺寸', '重量', '颜色', '成熟度'][Math.floor(Math.random() * 4)]
})))

const freights = ref(Array.from({ length: 10 }).map((_, i) => ({
	name: `运费模板${i + 1}`,
	charge: ['按件数', '按重量', '按体积'][Math.floor(Math.random() * 3)]
})))

const regions = ref(Array.from({ length: 10 }).map((_, i) => ({
	name: ['华北', '华东', '华南', '西南', '西北'][i % 5],
	code: 'R' + (1000 + i)
})))
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
